import { Col, message, Modal, Row, Space } from 'antd';
import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
import { dataProps } from '..';
import { ProForm, ProFormInstance, ProFormSwitch, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
import { addApi, selectOneApi, updateApi } from '../services';
interface CreateFormProps {
    id?: number;
    modalVisible: boolean;
    onCancel: () => void;
}

const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
    const initialValues: dataProps = {
        title: '',
        comment: '',
        status: 1,
        imageUrl:"",
        linkUrl:""
    };


    const { modalVisible, onCancel, id } = props;
    const formRef = useRef<ProFormInstance<dataProps>>();
    const [currentItem, setCurrentItem] = useState<dataProps>(initialValues)
    useEffect(() => {
        if (modalVisible) {
            if (id) {
                selectOne()
            } else {
                formRef.current?.resetFields();
                setCurrentItem(initialValues)
            }
        }
    }, [modalVisible])


    const selectOne = async () => {
        const hide = message.loading("正在获取详情")
        const res = await selectOneApi(id);
        if (res.code == 200) {
            res.data.status = !!res.data.status
            setCurrentItem(res.data);
            formRef.current?.setFieldsValue(res.data);

        }
        hide()
    }

    const formItemLayout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 },
    }
    return (
        <Modal
            title="编辑"
            width={600}
            open={modalVisible}
            onCancel={() => onCancel()}
            footer={null}
        >
            <ProForm<dataProps>

                formRef={formRef}
                {...formItemLayout}
                layout='horizontal'
                submitter={{
                    render: (props, doms) =>
                        <Row>
                            <Col span={14} offset={4}>
                                <Space>{doms}</Space>
                            </Col>
                        </Row>

                }}
                onFinish={async (values) => {
                    values.status = Number(values.status)
                    const hide = message.loading("正在提交！")
                    const submitFun = id ? updateApi : addApi;
                    const subData = {
                        ...values
                    }
                    if (id) {
                        subData.id = id
                    }

                    const res = await submitFun(subData)
                    hide()
                    if (res.code != 200) {

                    } else {
                        message.success("提交成功")
                        onCancel()
                    }
                }}
            >
                <ProFormText
                    name="id"
                    label="id"
                    disabled
                />
                <ProFormText
                    name="title"
                    label="名称"
                    // tooltip="最长为 24 位"
                    placeholder="请输入名称"
                />
                <ProFormText
                    name="imageUrl"
                    label="图片地址"
                    placeholder="请输入"
                />
                <ProFormText
                    name='linkUrl'
                    label="链接地址"
                    placeholder="请输入链接地址"
                />

                <ProFormSwitch
                    checkedChildren="开启"
                    unCheckedChildren="关闭"
                    label="状态"
                    name="status"
                    initialValue={true}
                />
                <ProFormTextArea
                    name='comment'
                    label="描述"
                    placeholder="请输入描述"
                />

            </ProForm>



        </Modal>
    );
};

export default CreateForm;
